/*
 * @Author: 徐建辰
 * @Date: 2021-11-04 11:14:18
 * @LastEditTime: 2021-11-04 14:28:29
 * @LastEditors: Please set LastEditors
 * @Description: 城市字母组件
 */
import React, {memo} from 'react'
import PropTypes from 'prop-types'
import CityItem from './CityItem'
import './CitySelector.css'

const CitySection = memo(function CitySection(props) {
  const {title, cities = [], onSelect} = props
  return (
    <ul className="city-ul">
      {/* 对索引字母用data-cate进行标记 */}
      <li className="city-li" key="title" data-cate={title}>{title}</li>
      {cities.map(city => <CityItem key={city.name} name={city.name} onSelect={onSelect} />)}
    </ul>
  )
})

CitySection.propTypes = {
  title: PropTypes.string.isRequired,
  cities: PropTypes.array,
  onSelect: PropTypes.func.isRequired,
}

export default CitySection

